<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";
    import { isColor } from "../utils/utils";
    import type { DividerProps } from "./Divider";

    const props: DividerProps = $props();

    const theme = isColor(props.theme) ? "" : props.theme;

    const classList = $derived(
        useClassList(props, "cm-divider", {
            [`cm-divider-${props.dir || "h"}`]: props.dir || "h",
            [`cm-divider-${props.align}`]: props.align,
            [`cm-divider-${theme}`]: theme,
            "cm-divider-dashed": props.dashed,
        }),
    );

    const aStyle = $derived(
        useStyle(props, {
            margin: `${props.margin}${typeof props.margin === "number" ? "px" : ""}`,
            "--cui-divider-border-color": props.theme && isColor(props.theme) ? props.theme : "",
        }),
    );

    const textStyle = $derived(
        useStyle(
            {},
            {
                margin: `${props.textMargin}${typeof props.textMargin === "number" ? "px" : ""}`,
                color: props.textColor ?? "",
            },
        ),
    );
</script>

<div class={classList} style={aStyle}>
    {#if props.children}
        <span class="cm-divider-text" style={textStyle}>{@render props.children?.()}</span>
    {/if}
</div>
